import React from 'react'
import {NavBar, Icon, Toast} from 'antd-mobile'
import './index.scss'

// 导入封装的ajax
import request from '../../utils/api.js'

// 引入地图当前位置封装的组件
import getCurrentCity from '../../utils/localtion.js'

import {IMG_BASE_URL} from '../../utils/config.js'

class MapFind extends React.Component {

    // ------------------------------数据部分----------------------------------

    state = {
        mapData: [],
        // 房源列表数据
        houseList: [],
        // 控制列表显示或者隐藏
        isShow: false
    }


    async componentDidMount() {
        // 组件开始加载时进行加载提示
        Toast.loading('正在加载一级...', 0, null, false)
        // 发ajax获取数据
        await this.loadData()
        // 初始化地图功能
        this.initMap()
    }


    // ------------------------------发送ajax部分----------------------------------

    // 调用后台接口获取所有的聚合数据
    loadData = async () => {
        // 支持城市的切换（获取城市的经纬度数据）
        let city = await getCurrentCity()
        let res = await request({
            method: 'get',
            url: '/area/map',
            params: {
                // 城市的唯一编号
                id: city.value
            }
        })
        this.setState({
            mapData: res.body
        })
        // 隐藏加载提示
        Toast.hide()
    }

    // 获取房源列表数据的方法
    getHouseList = async (id) => {
        let res = await request({
            method: 'get',
            url: 'houses',
            params: {
                cityId: id
            }
        })
        this.setState({
            houseList: res.body.list
        })
        // 隐藏加载提示
        Toast.hide()
    }


    // ------------------------------布局方法部分----------------------------------

    // 头部导航
    renderNavbar = () => {
        return (
            <NavBar
                className='navbar'
                mode="light"
                icon={<Icon type="left"/>}
                onLeftClick={() => {
                    // 返回到主页 =》 三种方法都可实现返回到上一级
                    // this.prodps.history.push('/home')
                    // this.props.history.goBack()
                    this.props.history.go(-1)
                }}
            >
                地图找房
            </NavBar>
        )
    }

    // 封装一级覆盖物
    drawFirstOverlay = (point, map) => {
        // 初始化地图，设置中心点坐标和地图缩放级别
        map.centerAndZoom(point, 11)

        // 批量绘制所有一级覆盖物
        this.state.mapData.forEach(item => {
            // 绘制单个覆盖物
            this.drawSingleOverlay(item, map, 'first')
        })
    }

    // 封装二级覆盖物
    drawSecondOverlay = async (data, point, map) => {
        // 放大地图
        map.centerAndZoom(point, 13)
        // 清空原有覆盖物
        setTimeout(() => {
            // 清除当前地图中的所有覆盖物
            map.clearOverlays()
        }, 0)
        let res = await request({
            method: 'get',
            url: '/area/map',
            params: {
                // 城市的唯一编号
                id: data.value
            }
        })
        console.log(res)
        // 把数据渲染出来
        res.body.forEach(item => {
            this.drawSingleOverlay(item, map, 'second')
        })
        // 隐藏加载提示
        Toast.hide()
    }

    // 封装三级覆盖物
    drawThirdOverlay = async (data, point, map) => {
        // 放大地图
        map.centerAndZoom(point, 15)
        // 清空二级覆盖物
        setTimeout(() => {
            map.clearOverlays()
        }, 0)
        // 调用后台接口获取三级覆盖物数据
        let res = await request({
            method: 'get',
            url: '/area/map',
            params: {
                id: data.value
            }
        })
        console.log(res)
        // 绘制三级覆盖物
        res.body.forEach(item => {
            this.drawSingleOverlay(item, map, 'third')
        })
        // 隐藏加载提示
        Toast.hide()
    }

    // 封装渲染房源列表方法
    renderHouseList = () => {
        const listTag = this.state.houseList.map(item => (
            <div key={item.houseCode} className='house'>
                <div className='img-wrap'>
                    <img className='img' src={IMG_BASE_URL + item.houseImg} alt=""/>
                </div>
                <div className='content'>
                    <h3 className='title'>{item.title}</h3>
                    <div className='desc'>{item.desc}</div>
                    <div>
                        {item.tags.map((item, index) => {
                            let tagCls = 'tag' + (index + 1)
                            return (
                                <span key={index} className={['tag', tagCls].join(' ')}>
                              {item}
                            </span>
                            )
                        })}
                    </div>
                    <div className='price'>
                        <span className='price-num'>{item.price}</span> 元/月
                    </div>
                </div>
            </div>
        ))
        return (
            <div className={['house-list', this.state.isShow ? 'show' : ''].join(' ')}>
                <div className='title-wrap'>
                    <h1 className='list-title'>房屋列表</h1>
                    <a className='title-more' href="/house/list">
                        更多房源
                    </a>
                </div>
                <div className='house-items'>
                    {/*这里是房源列表*/}
                    {listTag}
                </div>
            </div>
        )
    }

    // 封装单个覆盖物
    drawSingleOverlay = (data, map, type) => {
        // 根据参数传递的数据生成当前覆盖物的坐标点
        let point = new window.BMap.Point(data.coord.longitude, data.coord.latitude)

        // 添加地图覆盖物
        let opts = {
            // 表示覆盖物绘制的坐标
            position: point,
            // 覆盖物中心点的偏移量
            offset: new window.BMap.Size(-30, -30)
        }
        // 创建地图覆盖物（Label内容支持富文本）
        let overInfo = `
              <div class='map-overlay ${type === 'second' ? "map-overlay-second" : ""}'>
                <div>${data.label}</div>
                <div>${data.count}套</div>
              </div>
            `
        if (type === 'third') {
            // 三级覆盖物
            overInfo = `
                <div class='map-overlay-area'>${data.label}(${data.count}套)</div>
              `
        }

        let label = new window.BMap.Label(overInfo, opts)

        // 绑定点击事件
        label.addEventListener('click', (e) => {
            if (type === 'first') {
                Toast.loading('正在加载二级...', 0, null, false)
                // 点击一级覆盖物，就绘制二级覆盖物
                this.drawSecondOverlay(data, point, map)
            } else if (type === 'second') {
                Toast.loading('正在加载三级...', 0, null, false)
                // 点击二级覆盖物，就绘制三级覆盖物
                this.drawThirdOverlay(data, point, map)
            } else if (type === 'third') {
                Toast.loading('正在加载列表...', 0, null, false)
                // 点击三级覆盖物，展示房源列表
                // 获取当前小区的房源数据
                this.getHouseList(data.value)
                // 移动地图
                // 地图中心点
                let x0 = window.innerWidth / 2
                let y0 = (window.innerHeight - 330) / 2
                // 鼠标中心点
                let x1 = e.changedTouches[0].clientX
                let y1 = e.changedTouches[0].clientY
                map.panBy(x0 - x1, y0 - y1)
                // 显示房源列表
                this.setState({
                    isShow: true
                })
            }
        })

        // 调整默认的覆盖物样式
        label.setStyle({
            border: 0,
            background: 'rgba(0, 0, 0, 0)'
        })
        // 把地图覆盖物添加到地图中
        map.addOverlay(label)
    }

    // 初始化地图
    initMap = async () => {
        // 创建地图实例
        let map = new window.BMap.Map("mymap")
        // 获取当前的城市数据
        let city = await getCurrentCity()
        // 创建点坐标
        let point = new window.BMap.Point(city.lng, city.lat)

        // 给地图绑定移动事件
        map.addEventListener('movestart', () => {
            this.setState({
                // 隐藏房源列表
                isShow: false
            })
        })

        // 批量绘制所有一级覆盖物
        this.drawFirstOverlay(point, map)
    }

    render() {
        return (
            <div style={{height: '100%', background: '#eee'}}>
                {/*头部导航*/}
                {this.renderNavbar()}
                {/*初始化地图*/}
                <div style={{height: '100%'}} id="mymap"></div>
                {/*房源列表*/}
                {this.renderHouseList()}
            </div>
        )
    }
}

export default MapFind